<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tree edit</title>
    <uieip type="file" value="inc" src="/yqwin/easyui/include.txt" cache="true" minute="1440"></uieip>
    <uieip type="file" value="css" src="/yqwin/css/yqwin.min" cache="false"></uieip>
    <uieip type="file" value="js" src="/yqwin/data/yqwin.min" cache="false"></uieip>
</head>

<body style="margin: 0;">
    <table style="border-spacing: 0px;">
        <tr>
            <td style="vertical-align: top;">
                <ul id="tt">
                </ul>
            </td>
            <td style="vertical-align: top;">
                <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:isEdit(true)">isEdit-true</a>
                <a href="#" class="easyui-linkbutton" data-options=""
                    onclick="javascript:isEdit(false)">isEdit-false</a>
                <p></p>
                <input id="txt_width" value="280">
                <input id="txt_height" value="280">
                <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:resize()">高度100%</a>
                <p></p>
                <p></p>
                <form>
                    <table style="width: 100%;">
                        <tr>
                            <td width="380px">
                                <div class="easyui-panel" title="editMode"
                                    style="width:100%;max-width:370px;padding: 5px;">
                                    <div id="div_editMode"></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td width="380px">
                                <div class="easyui-panel" title="menuType"
                                    style="width:100%;max-width:370px;padding: 5px;">
                                    <div id="div_menuType"></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="easyui-panel" title="editType"
                                    style="width:100%;max-width:370px;padding: 5px;">
                                    <div id="div_editType"></div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </form>
                <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:reset()">reset</a>
                <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:destroy()">destroy</a>
            </td>
        </tr>
    </table>

    <script>
        $(function () {
            init_tree();
            init_btn();
        })

        function init_tree() {
            $('#tt').yqTree({
                ajaxUrl: "/Api/Base/tree.html", //ajax地址
                dbname: "yqbase",   //数据库
                tbname: "tree2",       //表
                keyId: "sid",       //关键字段
                bindingKeyId: null,
                bindingValue: null,
                pKeyId: "pid",
                pKeyValue: null,

                loadDataType: 2,    //全局加载模式
                displayMember: "name",
                loadData: true,

                menuType: 1,  //1-顶部菜单，2-右键菜单，3-顶部+右键  其他，无菜单

                overflowY: true,
                width: 300,
                height: 500,

                editMode: 1,   //1,2-弹出编辑模态窗体
                editType: 1,
                editModeW: 650, //模态编辑器宽度 格式为 800（数字） 
                editModeH: 350, //模态编辑器高度 格式为 600（数字） 
                editModeNo: -1, //编辑模板

                beforeBindingTitle: function (titles, callback) {
                    console.log("beforeBindingTitle", titles);
                    callback(titles);
                }, //标题绑定前
                afterBindingTitle: function () {

                    //---------------
                }, //标题绑定后

                beforeSetdata: function (data, callback) {
                    console.log("beforeSetdata", data);
                    callback(data)
                }, //绑定数据之前
                afterSetdata: function (data) {
                    console.log("afterSetdata", data);
                }, //绑定数据之后
                uppActionState: function (s_node, callback) {     //操作节点状态处理接口
                    console.log("uppActionState", s_node);
                    callback(true);
                },
            });
        }

        function init_btn() {
            $("#txt_width").numberspinner({
                label: 'w:',
                labelWidth: 25,
                width: 100,
                value: 300,
                min: 100,
                max: 1500
            });

            $("#txt_height").numberspinner({
                label: 'h:',
                labelWidth: 20,
                width: 150,
                value: 500,
                min: 100,
                max: 2000,
                buttonText: "resize",
                onClickButton: function () {
                    $('#tt').yqTree("resize",
                        {
                            width: $("#txt_width").numberspinner("getValue"),
                            height: $("#txt_height").numberspinner("getValue")
                        });
                },
            });



            //1-顶部菜单，2-右键菜单，3-顶部+右键  其他，无菜单
            $("#div_menuType").radiogroup({
                name: 'radio3',
                labelWidth: 340,
                data: [{
                    value: '1',
                    label: '1-顶部菜单',
                }, {
                    value: '2',
                    label: '2-右键菜单'
                }, {
                    value: '3',
                    label: '3-顶部+右键'
                }],
                value: 1,
                dir: 'v'
            });

            $("#div_editMode").radiogroup({
                name: 'radio1',
                labelWidth: 340,
                data: [{
                    value: '1',
                    label: '弹出编辑模态窗体',
                }],
                value: 1,
                dir: 'v'
            });

            $("#div_editType").radiogroup({
                name: 'radio2',
                labelWidth: 340,
                data: [{
                    value: '1',
                    label: '属性编辑模式 editMode=2,3使用',
                }, {
                    value: '2',
                    label: 'form编辑模式 editMode=2,3使用'
                }],
                value: 1,
                dir: 'v'
            });
        }

        function check() {
            window.parent.$MidWin.yqFormMdi("menuwin", {
                id: "",
                title: 'menu',
                openmore: true,
                content: '<button onclick="addmenu();">menu</button><button onclick="addedit();">edir</button>',
                url: "edit.html",
                closable: true,
            })
        }

        function resize() {
            $('#tt').yqTree("resize", {
                width: $("#txt_width").numberspinner("getValue"),
                height: $(window).height()
            });
        }

        function isEdit(tf) {
            $('#tt').yqTree("isEdit", tf);
        }

        function reset() {
            $('#tt').yqTree({
                menuType: $("#div_menuType").radiogroup("getValue"),
                editMode: $("#div_editMode").radiogroup("getValue"),
                editType: $("#div_editType").radiogroup("getValue")
            });
        }

        function destroy() {
            $('#tt').yqTree("destroy");
        }
    </script>
</body>

</html>